<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_分区元素</title>
</head>
<body>
    <!-- 1.行内分区元素 span -->
    这周还需要上<span style="color: orange;">三天</span>课<br>
    <!-- 要求：小可爱红色 JSDTN2504绿色  第三阶段蓝色 -->
    欢迎各位<span style="color: red;">小可爱</span>进入<span style="color: green;">JSDTN2504</span>的<span style="color: blue;">第三阶段</span>进行学习！

    <hr>
        <span>我是行内分区元素</span>
        <span>我是行内分区元素</span>
        <span>我是行内分区元素</span>
    <hr>
    <!--2.块级分区元素 div 没有文字效果 独占一行 -->
        <div>我是行内分区元素</div>
        <div>我是行内分区元素</div>
        <div>我是行内分区元素</div>
        <hr>
        <div class="header">我是顶部条</div>
        <div class="nav">我是导航栏</div>
        <div class="main">我是主体部分</div>
        <div class="aside">我是侧边栏</div>
        <div class="footer">我是尾部</div>
        <hr >
        <header>我是顶部条</header>
        <nav>我是导航栏</nav>
        <main>我是主体部分</main>
        <aside>我是侧边栏</aside>
        <footer>我是尾部</footer>

</body>
</html>